<template>
  <div>
    <div>
      <el-button type="success" @click="showAddMenuDialog(0)">
        添加
      </el-button>
    </div>
    <!-- 数据表格 -->
    <div>
      <el-table
        :data="menus"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="title" label="菜单标题" sortable />
        <el-table-column prop="component" label="路由名称" sortable />
        <el-table-column prop="sortValue" label="排序" sortable />
        <el-table-column prop="status" label="状态" sortable>
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
              {{ scope.row.status === 1 ? '正常' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable />
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button
              size="small"
              type="success"
              @click="showAddMenuDialog(scope.row.id)"
            >
              添加下级菜单
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增/更新菜单的对话跨国 -->
    <div>
      <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
        <el-form label-width="120px">
          <el-form-item label="菜单标题">
            <el-input v-model="sysMenu.title" />
          </el-form-item>
          <el-form-item label="路由名称">
            <el-input v-model="sysMenu.component" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="sysMenu.sortValue" />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="sysMenu.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  GetNestedMenus,
  DeleteMenuById,
  GetMenuById,
  UpdateMenuById,
  SaveMenu,
} from '@/api/sysMenu'
const menus = ref([])
//页面渲染时加载数据
onMounted(() => {
  fetchData()
})
//新增更新对话框的属性函数
const dialogVisible = ref(false)
const dialogTitle = ref('添加菜单')
const sysMenu = ref({ status: 1 })
const saveOrUpdate = () => {
  if (sysMenu.value.id) {
    //更新
    hanldeUpdateMenu()
  } else {
    //新增
    hanldeSaveMenu()
  }
}

//3、新增
//3.1 点击新增按钮/新增下级菜单按钮 弹出新增对话框
const showAddMenuDialog = parentId => {
  dialogTitle.value = '添加菜单'
  //清除之前新增或更新的缓存
  sysMenu.value = { status: 1 }
  //绑定pid
  sysMenu.value.parentId = parentId
  //弹出对话框
  dialogVisible.value = true
}
//3.2 对话框提交按钮 新增时的函数
const hanldeSaveMenu = async () => {
  // console.log(sysMenu.value)  sysMenu的数据后端没有校验
  await SaveMenu(sysMenu.value)
  ElMessage.success('新增成功')
  //刷新 页面数据
  fetchData()
  //关闭对话框
  dialogVisible.value = false
}

//加载菜单嵌套数据
const fetchData = async () => {
  const { data } = await GetNestedMenus()
  menus.value = data
}
//2、修改菜单
//2.1 修改按钮事件函数： 弹出对话框回显要修改的菜单数据
const handleEdit = async row => {
  const { data } = await GetMenuById(row.id)
  sysMenu.value = data
  dialogTitle.value = '修改菜单'
  dialogVisible.value = true
}
//2.2 更新
const hanldeUpdateMenu = async () => {
  await UpdateMenuById(sysMenu.value)
  ElMessage.success('更新成功')
  //刷新 页面数据
  fetchData()
  //关闭对话框
  dialogVisible.value = false
}
//1、删除菜单
const handleDelete = row => {
  ElMessageBox.confirm(`正在删除菜单【${row.title}】 ,是否确认?`, '删除确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await DeleteMenuById(row.id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      //刷新页面数据
      fetchData()
    })
    .catch(action => {
      // console.log(action)
      if (action === 'cancel') {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      }
    })
}
</script>
